<template>
  <div class="">
    <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>创建打卡</span>
  </div>
    <el-form :model="punchForm" :rules="rules" ref="punchForm" label-width="100px" class="demo-punchForm" @submit.native.prevent>
  <el-form-item label="签到名称" prop="name">
    <el-input v-model="punchForm.name"></el-input>
  </el-form-item>
  <el-form-item label="选择小组" prop="group">
    <el-select v-model="punchForm.group" placeholder="请选择小组">
      <el-option v-for="item in myGroup" :key="item.id" :label="item.groupname" :value="item.id"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="开始时间" required>
    <el-col :span="11">
      <el-form-item prop="dateStart1">
        <el-date-picker type="date" placeholder="选择日期" v-model="punchForm.dateStart1" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-form-item prop="dateStart2">
        <el-time-picker placeholder="选择时间" v-model="punchForm.dateStart2" style="width: 100%;"></el-time-picker>
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="结束时间" required>
    <el-col :span="11">
      <el-form-item prop="dateEnd1">
        <el-date-picker type="date" placeholder="选择日期" v-model="punchForm.dateEnd1" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-form-item prop="dateEnd2">
        <el-time-picker placeholder="选择时间" v-model="punchForm.dateEnd2" style="width: 100%;"></el-time-picker>
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="打卡类型" prop="type">
    <el-radio-group v-model="punchForm.type">
      <el-radio label="一键签到" value="一键签到"></el-radio>
      <el-radio label="定位签到" value="定位签到"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('punchForm')">立即创建</el-button>
    <el-button @click="resetForm('punchForm')">重置</el-button>
  </el-form-item>
</el-form>
</el-card>
  </div>
</template>

<script>
import { getUserProfile } from '@/utils/api/user'
import { getCreateGroup } from '@/utils/api/group'
import { createPublish } from '@/utils/api/sign'
export default {
  name: '',
  props: {},
  components: {},
  data () {
    return {
      punchForm: {
        name: '',
        group: '',
        dateStart1: '',
        dateStart2: '',
        dateEnd1: '',
        dateEnd2: '',
        // type: [],
        type: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入签到名称', trigger: 'blur' },
        ],
        group: [
          { required: true, message: '请选择签到小组', trigger: 'change' }
        ],
        dateStart1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        dateStart2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        dateEnd1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        dateEnd2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        type: [
          { required: true, message: '请选择打开类型', trigger: 'change' }
        ],
      },
      myGroup: null,
      uid: null,
      time: null
    }
  },
  created () {
    getCreateGroup().then(res => {
      this.myGroup = res.data.data
    })
    getUserProfile().then(res => {
      this.uid = res.data.data.id
    })
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.time = (this.punchForm.dateEnd2.getTime() - this.punchForm.dateStart2.getTime()) + (this.punchForm.dateEnd1.getTime() - this.punchForm.dateStart1.getTime())
          this.time = Math.floor(this.time / 1000)
          const data = {
            expiretime: this.time,
            name: this.punchForm.name,
            receiver: this.punchForm.group,
            type: this.punchForm.type
          }
          createPublish(data).then(() => {
            this.$message({
              message: '创建成功',
              type: 'success'
            })
            this.$router.push('/page/createClock/publish')
          }).catch(() => {
            this.$message({
              message: '创建失败',
              type: 'eeror'
            })
          })
        } else {
          return false;
        }
      });
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style lang="less" scoped>
  .el-card{
    margin-top: 30px;
  }
</style>
